<template>
  <div style="width: 492px;height: 900px;background: #0a5060;">
    <el-container>
      <el-main
        style="padding: 10px"
        :style="{ height: offsetheight + 'px' }"
        class="text-center"
      >
        <vue2-org-tree
          :data="data"
          :horizontal="horizontal"
          :collapsable="collapsable"
          :label-class-name="labelClassName"
          :render-content="renderContent"
          @on-expand="onExpand"
          @on-node-click="onNodeClick"
        ></vue2-org-tree>

        <div class="a1 pointer" @click="back">
          <img src="@/assets/back.png" width="18" height="18" />
        </div>
      </el-main>
    </el-container>

    <el-row class="text-center">
      <el-radio-group v-model="activeName2" size="mini">
        <el-radio-button label="info">详细信息</el-radio-button>
        <el-radio-button label="question">服务日志</el-radio-button>
      </el-radio-group>
    </el-row>

    <el-container>
      <el-main style="padding: 10px" :style="{ height: offsetheight + 'px' }">
        <info
          v-if="activeName2 == 'info'"
          :gridid="current.id"
          v-on:getpoint="getpoint"
        ></info>

        <question
          v-if="activeName2 == 'question'"
          :gridid="current.id"
          v-on:getpoint="getpoint"
        ></question>

        <user
          v-if="activeName2 == 'user'"
          :gridid="current.id"
          v-on:getpoint="getpoint"
        ></user>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Vue from "vue";
import Vue2OrgTree from "vue2-org-tree";

import question from "./question_1";
import user from "./user_1";
import info from "./info";

export default {
  name: "grid111",

  data() {
    return {
      // props : {
      // 	label : 'name',
      // 	children: 'children',
      // },

      data: {},

      current: {
        id: "88888",
      },

      horizontal: false,
      collapsable: false,
      expandAll: true,
      labelClassName: "bg-white",

      offsetheight: (document.documentElement.clientHeight - 220) * 0.5,

      activeName2: "info",
    };
  },

  props: {},

  components: {
    Vue2OrgTree,
    question,
    user,
    info,
  },

  computed: {},

  methods: {
    init() {
      this.$http({
        //fun: 'overviewList',
        fun: "subGrideNoList",
        id: this.current.id,
        cb: (res) => {
          const result = this.$util.transData(
            res,
            "id",
            "parent_id",
            "children"
          );
          this.data = result[0];
          this.current = this.data;
          this.$emit("showgrid", this.current);
        },
      });
    },

    renderContent(h, data) {
      return data.name; // + (data.name ? data.name : '');
    },

    onExpand(data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },

    onNodeClick(e, data) {
      console.log("onNodeClick");
      console.log(data);
      this.$emit("showgrid", data);
      this.current = data;

      this.init();
    },

    collapse(list) {
      var _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },

    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },

    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    },

    getpoint(item) {
      console.log(item);
      this.$emit("getpoint", item);
    },

    back() {
      this.current.id = this.current.parent_id;
      this.init();
    },
  },

  watch: {},

  mounted() {
    this.init();
  },
};
</script>

<style scope>
.a1 {
  position: absolute;
  top: 70px;
  left: 370px;
  /*background-color: #2092ab;*/
  /*padding: 0 10px;*/
}

.amap-wrapper {
  width: 500px;
  height: 500px;
}

.a11 {
  position: absolute;
  /*background-color: #2092ab;*/
  /*padding: 0 10px;*/
  width: 492px;
  /*height: 940px;*/
  top: 105px;
  left: 35px;
}

.a12,
.a13 {
  position: absolute;
  top: 520px;
  width: 20px;
  height: 90px;
  background-image: url("../../../assets/edge.png");
  color: #fff;
  text-align: center;
  padding-top: 72px;
  cursor: pointer;
}

.a12 {
  left: 526px;
}

.a13 {
  left: 34px;
}

.a2 {
  position: absolute;
  width: 414px;
  z-index: 999;
}

.a3 {
  width: 60px;
  height: 42px;
  background: #4bacc6;
  color: #fff;
  text-align: center;
  padding-top: 18px;
  margin-top: 10px;
  border-radius: 7px;
}

.a4 {
  width: 60px;
  height: 52px;
  background: #4bacc6;
  color: #fff;
  text-align: center;
  padding-top: 8px;
  margin-top: 10px;
  border-radius: 7px;
}

.active {
  background-color: #27cebf !important;
}

.btn1 {
  width: 100px;
  height: 30px;
  float: left;
  background: #0a8991;
  margin-left: 3px;
  padding-top: 7px;
  color: #fff;
  cursor: pointer;
}
</style>
